<template>
    <!--单文件组件都是以.vue结尾的文件，文件名命名规则与组件名相同（School，school，my-school，MySchool）-->
    <!--tempate写组件html模板-->
    <div class="demo">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click='showName'>点我展示学校名</button>
    </div>
</template>

<style>
    /* style写css样式--> */
    .demo{
        background-color: orange
    }
</style>

<script>
    //script写组件的js交互
    //school组件
    let School = { 
        name: 'School',
        data() {
            return {
                name: 'shanggg',
                address: 'bj',
            }
        },
        methods:{
            showName() {
                alert(this.name);
            }
        }
    }
    //需要暴露组件，别的地方才能引入，这里是用的默认暴露（3种暴露，分别暴露，统一暴露，默认暴露）
    export default School
</script>